<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
<!--      <el-input
        v-model="listQuery.merchandiseSn"
        clearable
        class="filter-item"
        style="width: 200px"
        :placeholder="$t('Merchandise_number')"
      />-->

      <el-input
        v-model="listQuery.merchandiseName"
        clearable
        class="filter-item"
        style="width: 200px"
        :placeholder="$t('Merchandise_name')"
      />

      <el-date-picker
        v-model="listQuery.startTime"
        type="date"
        class="filter-item"
        :editable="false"
        :clearable="true"
        :placeholder="$t('Start_time')"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
      ></el-date-picker>

      <el-date-picker
        v-model="listQuery.endTime"
        type="date"
        class="filter-item"
        :editable="false"
        :clearable="true"
        :placeholder="$t('End_time')"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
      ></el-date-picker>

      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
        >{{ $t("Search") }}</el-button
      >
    </div>

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      :element-loading-text="$t('Searching')"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        type="index"
        :index="getIndex"
        width="50"
      ></el-table-column>

      <el-table-column
        align="center"
        property="shopName"
        :label="$t('Store_name')"
      >
        <template slot-scope="scope">
          {{ scope.row.shopName }}
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        :label="$t('Merchandise_number')"
        prop="merchandiseSn"
      />

      <el-table-column
        align="center"
        :label="$t('Merchandise_name')"
        prop="merchandiseName"
      />

      <el-table-column
        align="center"
        :label="$t('Specifications')"
        prop="standard"
      />

      <el-table-column align="center" :label="$t('Model')" prop="model" />

      <el-table-column
        align="center"
        property="unit"
        :label="$t('Product_unit')"
      >
        <template slot-scope="scope">
          {{ getUnit(scope.row) }}
        </template>
      </el-table-column>

      <el-table-column align="center" :label="$t('入库量')" prop="inNum" />

<!--      <el-table-column
        align="center"
        :label="$t('平均入库量 ')"
        prop="avgInNum"
      >
        <template slot-scope="scope">
          {{ scope.row.avgInNum | floorTwoDecimal }}
        </template>
      </el-table-column>-->

      <el-table-column align="center" :label="$t('消耗量')" prop="consumerNum">
        <template slot-scope="scope">
          {{ scope.row.consumerNum | floorTwoDecimal }}
        </template>
      </el-table-column>

<!--      <el-table-column
        align="center"
        :label="$t('平均消耗量 ')"
        prop="avgConsumerNum"
      >
        <template slot-scope="scope">
          {{ scope.row.avgConsumerNum | floorTwoDecimal }}
        </template>
      </el-table-column>-->

      <el-table-column align="center" :label="$t('损耗量')" prop="lossNum">
        <template slot-scope="scope">
          {{ scope.row.lossNum | floorTwoDecimal }}
        </template>
      </el-table-column>

<!--      <el-table-column
        align="center"
        :label="$t('平均损耗量 ')"
        prop="avgLossNum"
      >
        <template slot-scope="scope">
          {{ scope.row.avgLossNum | floorTwoDecimal }}
        </template>
      </el-table-column>-->
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { allForPerm } from "@/api/shop";
import { materialSummaryStatistics } from "@/api/merchandise";
import BackToTop from "@/components/BackToTop";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import store from "@/store";

export default {
  name: "materialSummaryStatistics",
  components: {
    BackToTop,
    Pagination,
  },
  data() {
    return {
      // 当前店铺
      shop: store.state.user.shop,
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1,
        limit: 20,
        merchandiseSn: undefined,
        merchandiseName: undefined,
        // 开始时间
        startTime: undefined,
        // 结束时间
        endTime: undefined,
      },
      list: [],
      shops: [],
    };
  },
  created() {
    var starDate = this.getFirstDayOfMonth(this.getVancouverDate()); //当月第一天
    this.listQuery.startTime = starDate;
    this.listQuery.endTime = this.getVancouverDate();

    this.getList();
    allForPerm().then((response) => {
      this.shops = response.data.data.list;
    });
  },
  methods: {
    getList() {
      materialSummaryStatistics(this.listQuery)
        .then((response) => {
          this.list = response.data.data.list;
          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    handleFilter() {
      this.getList();
    },
    getUnit(row) {
      return (
        row.basicUnit +
        "," +
        row.checkUnit +
        "(1:" +
        row.checkRatio +
        ")" +
        "," +
        row.unit +
        "(1:" +
        row.ratio +
        ")"
      );
    },
    getFullDate(targetDate) {
      var D, y, m, d;
      if (targetDate) {
        D = new Date(targetDate);
        y = D.getFullYear();
        m = D.getMonth() + 1;
        d = D.getDate();
      } else {
        y = fullYear;
        m = month;
        d = date;
      }
      m = m > 9 ? m : "0" + m;
      d = d > 9 ? d : "0" + d;
      return y + "-" + m + "-" + d;
    },
    getIndex(index) {
      return index + 1 + (this.listQuery.page - 1) * this.listQuery.limit;
    },
    //获取加拿大温哥华的当前时间
    getVancouverDate() {
      const options = { timeZone: "America/Vancouver" };
      const vancouverDate = new Date().toLocaleDateString("en-CA", options);
      return vancouverDate;
    },
    //获取加拿大温哥华当月第一天的时间
    getFirstDayOfMonth(dateString) {
      // 创建一个新的 Date 对象
      const date = new Date(dateString);
      // 将日期设置为月份的第一天
      date.setDate(1);
      // 获取年月日并返回
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      const day = date.getDate().toString().padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
  },
};
</script>

<style scoped>
</style>
